<template>
  <div class="login-container" v-if="!authStore.isLoggedIn">
    <!-- 登录表单 -->
    <form @submit.prevent="handleSubmit">
      <div class="form-group">
        <label for="username">用户名</label>
        <input v-model="username" type="text" id="username" placeholder="Username" class="form-control" />
      </div>
      <div class="form-group">
        <label for="password">密码</label>
        <input v-model="password" type="password" id="password" placeholder="Password" class="form-control" />
      </div>
      <button type="submit" class="btn btn-primary">登录</button>
    </form>
  </div>
  <div v-else class="logged-in-container">
    <!-- 登录成功后的其他内容 -->
    <p class="uuu">Welcome, {{ authStore.user.username }}!</p>
    <!-- 退出登录按钮 -->
    <button @click="handleLogout" class="btn btn-secondary">退出登录</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useAuthStore } from '@/stores/auth';
import { useRouter } from 'vue-router';
import { Button } from 'vant';

const username = ref('yaotiandi');
const password = ref('123456');
const authStore = useAuthStore();
const router = useRouter();

const handleSubmit = async () => {
  // 假设的特定账号和密码  
  const correctUsername = 'yaotiandi';
  const correctPassword = '123456';

  // 检查用户输入的账号和密码是否正确  
  if (username.value === correctUsername && password.value === correctPassword) {
    try {
      // 登录成功，更新Pinia store中的登录状态  
      await authStore.login({ username: username.value, password: password.value });

      // 登录成功后，根据路由参数决定重定向到哪里  
      const redirect = router.currentRoute.value.query.redirect;
      if (redirect) {
        await router.push(redirect);
      } else {
        // 如果没有重定向参数，重定向到首页或任意默认页面  
        await router.push('/');
      }
    } catch (error) {
      // 登录成功后的其他处理逻辑（如果有的话）  
      console.error('After login error:', error);
    }
  } else {
    // 登录失败，可以显示错误信息给用户  
    alert('Invalid username or password');
  }
};

const handleLogout = async () => {
  try {
    // 调用 authStore 中用于登出的方法  
    await authStore.logout();
    // 登出后重定向到登录页面或首页  
    await router.push('/login'); // 假设登录页面的路由是 '/login'  
  } catch (error) {
    // 处理登出失败的情况  
    console.error('Logout failed:', error);
  }
};
</script>

<style scoped>
.login-container {
  width: 300px;
  margin: 0 auto;
}

.form-group {
  margin-bottom: 15px;
  font-size: 16px;
}

.form-control {
  width: 100%;
  padding: 10px;
  font-size: 16px;
}

.btn {
  width: 100%;
  padding: 10px;
  font-size: 16px;
  border: none; /* Optional: removes the default border */
}

/* Add a new class for the green button */
.btn-green {
  background-color: green;
  color: white;
}

.logged-in-container {
  width: 300px;
  margin: 0 auto;
}

.uuu {
  font-size: 20px;
}

/* Update the button colors */
.btn-primary {
  background-color: green;
  color: white;
}

.btn-secondary {
  background-color: green;
  color: white;
}
</style>
